<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
    }
  
  </style>
</head>
<body>
  <input type="button" value="向右移动400">
  <div class="box"></div>
  <script>
    var btn = document.querySelector('input[type="button"]');
    var box = document.querySelector('.box');
    // var timeID = null;
    // var current = box.offsetLeft;
    // var target = 400;
    // var step = 10;
    btn.onclick = function(){
      animate(box,box.offsetLeft,400,10)
    }
    function animate(element,current,target,step){
      if(element.timeID){
        clearInterval(element.timeID);
        element.timeID = null;
      }
      if(current > target){
        step = -Math.abs(step)
      }
      element.timeID = setInterval(function(){
        if(Math.abs(current - target) < Math.abs(step)){
          current = target;
          clearInterval(element.timeID);
        }else{
          current += step;
        }
        element.style.left = current + 'px'; 
      },30)
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    } 
    .box2{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
    }
  </style>
</head>
<body>
  <input type="button" value="移动">
  <input type="button" value="移动1000">
  <div class="box1"></div>
  <div class="box2"></div>
  <script>
    var btn = document.querySelector('input[type = "button"]');
    var btn2 = document.querySelector('input:nth-child(2)')
    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    btn.onclick = function(){
      animate(box1,box1.offsetLeft,400,20);
      animate(box2,box2.offsetLeft,800,10);

    }
    btn2.onclick = function(){
      animate(box1,box1.offsetLeft,600,20);
      animate(box2,box2.offsetLeft,900,10);
    }
    
    function animate(element,current,target,step){
      if(element.timeID){
        clearInterval(element.timeID);
        element.timeID = null;
      };
      if(current > target){
        step = - Math.abs(step);
      };
      element.timeID = setInterval(function(){
        if(Math.abs(current - target) < Math.abs(step)){
          current = target;
          clearInterval(element.timeID);
          console.log(1)
        }else{
          current += step;
          
          console.log(2)
        }
        element.style.left = current + 'px';
      },30)
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      height: 300px;
      background-color: pink;
      position: relative;
      cursor:move;
    }
    
  </style>
</head>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.onmousedown = function(e){
      var mouse_x = e.clientX - this.offsetLeft;
      var mouse_y = e.clientY - this.offsetTop;
      document.onmousemove = function(e){
        div.style.left = e.pageX - mouse_x + 'px';
        div.style.top = e.pageY - mouse_y + 'px';
      };
    };
    div.onmouseup = function(){
      document.onmousemove = null;
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .box1{
      font-size: 40px;
      font-weight: 700;
      cursor: pointer;
    }
    .model{
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      position: absolute;
      left:0;
      top:0; 
      display: none;
      z-index: 1;
    } 
  </style>
</head>
<body>
  <div class="box1">点我你试试</div>
  <div class="model"></div>
  <script>
    var box1 = document.querySelector('div:nth-child(1)');
    var model = document.querySelector('div:nth-child(2)');
    box1.onclick = function(){
      model.style.display = 'block';
    }
  </script>
</body>
</html> -->